<template>
  <div class="out_container">
    <!-- partial:index.partial.html -->
    <div
      class="container"
      :class="{ right_panel_active: inORup, left_panel_active: !inORup }"
    >
      <!-- Sign Up -->
      <div class="container__form container--signup">
        <form action="#" class="form" id="form1">
          <h2 class="form__title">Sign Up</h2>
          <input type="text" placeholder="User" class="input" v-model="userData.userName" />
          <input type="email" placeholder="Email" class="input"  v-model="userData.userEmail" />
          <input type="password" placeholder="Password" class="input" v-model="userData.passWord" />
          <button class="btn" @click="door(false)">Sign Up</button>
        </form>
      </div>

      <!-- Sign In -->
      <div class="container__form container--signin">
        <form action="#" class="form" id="form2">
          <h2 class="form__title">Sign In</h2>
          <input type="email" placeholder="Email" class="input" v-model="userData.userEmail" />
          <input type="password" placeholder="Password" class="input" v-model="userData.passWord" />
          <a href="#" class="link">Forgot your password?</a>
          <button class="btn" @click="door(true)">Sign In</button>
        </form>
      </div>

      <!-- Overlay -->
      <div class="container__overlay">
        <div class="overlay">
          <div class="overlay__panel overlay--left">
            <button class="btn" id="signIn" @click.prevent="change_inORup">
              Sign In
            </button>
          </div>
          <div class="overlay__panel overlay--right">
            <button class="btn" id="signUp" @click.prevent="change_inORup">
              Sign Up
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script src="./index.js"></script>

<style lang="scss" scoped>
@import "./index.scss";
</style>